<template>
	<view>
		<!-- 搜索框 -->
		<view class="page_box">
			<u-search v-model="searchVal" margin="30rpx" placeholder="搜索企业" height="64" @search="onSearch"
				@custom="onSearch" @clear="clearSearch"></u-search>
		</view>
		<view class="sh-userinfo-box">
			<view class="head-wrap" v-for="item in storeList" :key="item.id" v-if="item.name != null">
				<view class="user-head u-flex u-row-between"
					style="border-bottom: 1rpx solid #f1f1f1;width: 700rpx;margin-left: 25rpx;">
					<view class="info-box">
						<view class="u-flex" @tap="jump('/pages/app/commission/apply', { item:item})">
							<view class="head-img-wrap">
								<image class="head-img" mode="aspectFill" :src="item.avatar" v-if="item.avatar != null"></image>
								<image class="head-img" mode="aspectFill" src="https://zh69xx.oss-cn-beijing.aliyuncs.com/app/date/2023/defaultAvatar.png" v-else></image>
							</view>
							<view class="uni-flex uni-row over">
								<text class="user-name u-ellipsis-1" style="text-align: center;">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Auth from '@/ljshop/permission/index.js';
	export default {
		components: {},
		data() {
			return {
				searchVal: '',
				storeList: [],
				showModal: false
			};
		},
		computed: {},
		onShow() {
			this.historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) :
				[];
		},
		methods: {
			jump(path, parmas) {
				//console.info(JSON.stringify(parmas))
				//console.info(path)
				this.$Router.push({
					path: path,
					query: {
						id: parmas.item.id,
						name: parmas.item.name
					}
				});
			},

			// 搜索
			onSearch(e) {
				//console.info(e)
				// if (e && !this.historyTag.includes(e)) {
				// 	let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, e));
				// 	uni.setStorageSync('searchHistoryArr', searchHistoryArr);
				// }
				// this.$Router.push(`/pages/goods/searchlist?keywords=${e}`);
				// this.searchVal = '';
				let that = this
				that.$http(
					'store.businessSearch', {
						keyword: e,
						page: 0
					},
					'保存中...'
				).then(res => {
					//console.info(JSON.stringify(res))
					that.storeList = res.data

				});
			},
			// 选中


			// 清除输入框
			clearSearch() {
				this.searchVal = '';
			},
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
			// 清除历史记录
			clearSearchHistory() {
				this.historyTag = [];
				uni.removeStorageSync('searchHistoryArr');
			}
		}
	};
</script>

<style lang="scss">
	.page_box {
		background-color: #fff;
	}

	.search-history {
		padding: 30rpx;

		.title-box {
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.clear-history-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.content {
			width: 100%;

			.item {
				padding: 0 20rpx;
				line-height: 60rpx;
				background: #f5f6f8;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				max-width: 690rpx;
			}
		}
	}

	.sh-userinfo-box {
		height: 180rpx;

		.head-wrap {
			width: 100%;
			background: #fff;

			.merchant-btn {
				width: 178rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #ffffff;
				border-radius: 32rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #a8700d;
			}
		}

		.user-head {
			width: 100%;
			padding-top: 30rpx;

			.info-box {
				padding-left: 30rpx;

				.head-img-wrap {
					position: relative;

					.refresh-btn {
						position: absolute;
						padding: 0;
						background: none;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #c9912c;
						top: -10rpx;
						right: 10rpx;
					}
				}

				.head-img {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					background: #ccc;
					margin-right: 25rpx;
					overflow: hidden;
				}

				.user-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #000;
					line-height: 30rpx;
					width: 240rpx;
					text-align: center;
				}

				.user-level {
					font-size: 28rpx;
					font-weight: 500;
					color: #fda22a;
					line-height: 30rpx;
					padding: 10rpx;
					width: 180rpx;
					text-align: center;
					margin-top: 15rpx;
					background-color: #fff;
					border-radius: 15rpx;
					border: #f1f1f1 1rpx solid;
				}
			}

			.tag-box {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 22rpx;
				margin-left: 10rpx;

				.tag-img {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					border-radius: 50%;
				}

				.tag-title {
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 40rpx;
					padding: 0 10rpx;
				}
			}

			.code-btn {
				padding: 30rpx;

				.icon-qrcode {
					font-size: 50rpx;
					color: #fff;
				}
			}
		}

		.wallet {
			font-size: 20rpx;
			padding-left: 140rpx;

			.money {
				margin-right: 40rpx;
			}
		}
	}
	.over{
		width: 500rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>